<template>
  <div id="consultProcess">
    <div id="entirety" style="background-image: url('/static/background/background.png')">
      <div class="wholeDiv">
        <el-row :gutter="10" style="min-height: 88vh">
          <el-col v-for="(itemInfo, index) in dataList" :key="itemInfo.id" :span="12">
            <el-card class="body-card">
              <el-row :span="24" style="margin-top: -10px">
                <el-col :span="23">
                  <span :title="itemInfo.name" class="title-name">{{ itemInfo.name }}</span>
                </el-col>
                <el-col :span="1">
                  <div @click="toDetail(itemInfo)">
                    <img src="/static/icon/details.png" style="
                                                margin-top: -13px;
                                                margin-left: 13px;
                                            "/>
                  </div>
                </el-col>
              </el-row>
              <el-row :span="24" style="margin-top: 10px">
                <el-col :span="10">
                  <el-row>
                    <div style="overflow: auto">
                      <el-row>
                        <el-col :span="24">
                          <span :title="itemInfo.timeInfo" class="title-name" style="color: rgb(84 112 198);
                              ">{{ itemInfo.timeInfo }}
                            <span :id="'timer' + index" class="title-name"></span>
                          </span>
                        </el-col>
                        <el-col :span="24">
                          <span class="title-name" style="color: rgb(84 112 198)">磋商任务开始时间：{{ convertTimestamp(itemInfo.startTime) }}</span>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="progress">
                      <div
                        style="height: 100%; width: 100%;">
                        <div :id="'chart' + index" ref="chart" style="height: 22vh"></div>
                      </div>
                    </div>
                  </el-row>
                </el-col>
                <el-col :span="14" style="max-height: 22vh; overflow-x: auto">
                  <div v-for="(item, index) in itemInfo.graphInfos" :key="item.id" style="
                                            padding-left: 10px;
                                            padding-right: 10px;
                                        ">
                    <el-tooltip :content="'进度：' + item.value + '%'" effect="light" placement="top">
                      <el-progress :color="getProgressColor(item)" :format="formatText(item)" :percentage="item.value" :status="item.value === 100? 'success': 'exception'" :text-color="getProgressTextColor(item) " :text-inside="true">
                      </el-progress>
                    </el-tooltip>
                    <img v-if="checkEnd(itemInfo, index)" class="datecenter-img" src="/static/kt1/jiantou.png" width="25"/>
                  </div>
                </el-col>
              </el-row>
              <el-row :span="24">
                <div v-for="item in itemInfo.consultInfos" :key="item.id" class="bgbl">
                  <el-row style="width: 100%;height: 100%;margin-top: 15px;">
                    <el-col :span="4">
                      <span style="color: #fff">{{ item.name }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span style="color: #fff">CPU：</span>
                      <span style="color: #fff">{{ item.cpuUsed }}/{{ item.cpuQuota }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span style="color: #fff">内存：</span>
                      <span style="color: #fff">{{ item.memoryUsed }}/{{ item.memoryQuota }}</span>
                    </el-col>
                    <el-col :span="6">
                      <span style="color: #fff">存储量：</span>
                      <span style="color: #fff">{{ item.capacityUsed }}/{{ item.capacityQuota }}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-row>
              <!--              <el-row>-->
              <!--                <el-col :span='24' style='padding: 5px;'>-->
              <!--                  <el-card class='body-card' style='overflow:auto'>-->
              <!--                    <el-input-->
              <!--                      type='textarea'-->
              <!--                      autosize-->
              <!--                      placeholder='请输入内容'-->
              <!--                      v-model='itemInfo.logInfo.msg'>-->
              <!--                    </el-input>-->
              <!--                  </el-card>-->
              <!--                </el-col>-->
              <!--              </el-row>-->
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  font-style: normal;
  font-width: normal;
}

.wholeDiv {
  .progress {
  }

  .clearfix {
    padding: 5px;
    margin-left: -8%;
    margin-top: -8%;
  }

  .el-collapse-item {
    background: rgba(255, 255, 255, 0) !important;
  }

  .el-collapse-item__header {
    height: 40px;
    line-height: 40px;
    background: rgba(255, 255, 255, 0) !important;
    color: #ffffff;
  }

  .el-collapse-item__content {
    padding-bottom: 25px;
    font-size: 13px;
    color: #eeeeee;
  }

  .el-collapse-item__wrap {
    background-color: transparent;
  }

  .el-descriptions {
    background: rgba(255, 255, 255, 0);
    margin-left: 7%;
  }

  .el-descriptions__body {
    color: #d5d5d5;
    background-color: rgba(255, 255, 255, 0);
    font-size: 10pt;
  }

  .el-descriptions__title {
    color: white;
    font-size: 11pt;
  }

  .el-descriptions-item el-descriptions-item__cell {
    height: 10px;
  }
}

.title-name {
  font-family: 'Alternate';
  color: #ffffff;
  letter-spacing: 0;
  text-shadow: 0 0 6px #26a2ff;
  font-size: 10pt;
}

.body-card {
  margin: 5px;
  height: 44vh;
  border-radius: 4px;
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0);
}

.custom-collapse {
  background-color: rgba(255, 255, 255, 0) !important;
}

.datecenter-img {
  margin-left: 45% !important;
}

.custom-collapse {
  background-color: transparent;
  height: 12.5vh;
  overflow: auto;
}

.el-progress {
  position: relative;
  line-height: 1;
}

.el-progress-bar__outer {
  height: 20px !important;
  background-color: #d3d6de !important;
}

.el-progress-bar__innerText {
  margin-right: 45% !important;
}
</style>
